<template>
  <div class="bg-white rounded-xl p-8 mt-5 shadow-lg">
    <div class="text-center mb-10">
      <h2 class="text-slate-800 mb-2 text-2xl font-bold">📖 Vue3 生命周期完整指南</h2>
      <p class="text-slate-600 text-lg">深入理解父子组件生命周期的执行顺序和时机</p>
    </div>

    <!-- 渲染顺序图解 -->
    <div class="mb-10">
      <h3 class="text-slate-900 mb-5 pb-2 border-b-2 border-slate-200 font-semibold">
        🔄 父子组件渲染顺序
      </h3>
      <div class="space-y-8">
        <div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
          <h4 class="text-gray-600 mb-4 font-medium">1. 创建阶段 (从外到内)</h4>
          <div class="flow-steps">
            <div class="step parent">父组件 setup</div>
            <div class="arrow">→</div>
            <div class="step child">子组件 setup</div>
            <div class="arrow">→</div>
            <div class="step grandchild">孙组件 setup</div>
          </div>
        </div>

        <div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
          <h4 class="text-gray-600 mb-4 font-medium">2. 挂载前阶段 (从外到内)</h4>
          <div class="flow-steps">
            <div class="step parent">父组件 onBeforeMount</div>
            <div class="arrow">→</div>
            <div class="step child">子组件 onBeforeMount</div>
            <div class="arrow">→</div>
            <div class="step grandchild">孙组件 onBeforeMount</div>
          </div>
        </div>

        <div class="bg-amber-50 p-5 rounded-lg border border-amber-500">
          <h4 class="text-gray-600 mb-4 font-medium">3. 挂载完成阶段 (从内到外) ⭐ 重点！</h4>
          <div class="flow-steps">
            <div class="step grandchild">孙组件 onMounted</div>
            <div class="arrow">→</div>
            <div class="step child">子组件 onMounted</div>
            <div class="arrow">→</div>
            <div class="step parent">父组件 onMounted</div>
          </div>
          <p class="note">💡 挂载完成是从内向外的，确保子组件完全就绪后父组件才完成挂载</p>
        </div>
      </div>
    </div>

    <!-- 更新阶段 -->
    <div class="mb-10">
      <h3 class="text-slate-900 mb-5 pb-2 border-b-2 border-slate-200 font-semibold">
        🔄 组件更新顺序
      </h3>
      <div class="space-y-5">
        <div class="bg-slate-100 p-4 rounded-lg">
          <h4 class="text-slate-700 mb-2 font-medium">父组件数据变化影响子组件：</h4>
          <div class="flow-steps">
            <span class="step parent">父 onBeforeUpdate</span>
            <span class="arrow">→</span>
            <span class="step child">子 onBeforeUpdate</span>
            <span class="arrow">→</span>
            <span class="step child">子 onUpdated</span>
            <span class="arrow">→</span>
            <span class="step parent">父 onUpdated</span>
          </div>
        </div>

        <div class="bg-slate-100 p-4 rounded-lg">
          <h4 class="text-slate-700 mb-2 font-medium">子组件内部数据变化：</h4>
          <div class="flow-steps">
            <span class="step child">子 onBeforeUpdate</span>
            <span class="arrow">→</span>
            <span class="step child">子 onUpdated</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 卸载阶段 -->
    <div class="mb-10">
      <h3 class="text-slate-900 mb-5 pb-2 border-b-2 border-slate-200 font-semibold">
        🔄 组件卸载顺序
      </h3>
      <div class="flow-steps mb-2">
        <div class="step parent">父 onBeforeUnmount</div>
        <div class="arrow">→</div>
        <div class="step child">子 onBeforeUnmount</div>
        <div class="arrow">→</div>
        <div class="step grandchild">孙 onBeforeUnmount</div>
        <div class="arrow">→</div>
        <div class="step grandchild">孙 onUnmounted</div>
        <div class="arrow">→</div>
        <div class="step child">子 onUnmounted</div>
        <div class="arrow">→</div>
        <div class="step parent">父 onUnmounted</div>
      </div>
      <p class="note">💡 卸载是先标记要卸载（从外到内），然后执行卸载（从内到外）</p>
    </div>

    <!-- 实践要点 -->
    <div class="mb-10">
      <h3 class="text-slate-900 mb-5 font-semibold">💡 实践要点</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
          <h4 class="text-slate-800 mb-3 font-medium">🎯 什么时候使用 onMounted？</h4>
          <ul class="space-y-1 pl-5">
            <li class="text-slate-600 text-sm leading-relaxed">DOM操作（访问$refs）</li>
            <li class="text-slate-600 text-sm leading-relaxed">启动定时器</li>
            <li class="text-slate-600 text-sm leading-relaxed">订阅事件</li>
            <li class="text-slate-600 text-sm leading-relaxed">发起网络请求</li>
          </ul>
        </div>

        <div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
          <h4 class="text-slate-800 mb-3 font-medium">🧹 什么时候使用 onBeforeUnmount？</h4>
          <ul class="space-y-1 pl-5">
            <li class="text-slate-600 text-sm leading-relaxed">清理定时器</li>
            <li class="text-slate-600 text-sm leading-relaxed">取消事件监听</li>
            <li class="text-slate-600 text-sm leading-relaxed">取消网络请求</li>
            <li class="text-slate-600 text-sm leading-relaxed">清理手动DOM操作</li>
          </ul>
        </div>

        <div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
          <h4 class="text-slate-800 mb-3 font-medium">⚡ 什么时候使用 onUpdated？</h4>
          <ul class="space-y-1 pl-5">
            <li class="text-slate-600 text-sm leading-relaxed">访问更新后的DOM</li>
            <li class="text-slate-600 text-sm leading-relaxed">执行依赖DOM的操作</li>
            <li class="text-slate-600 text-sm leading-relaxed">
              注意：避免在此修改数据（会造成循环更新）
            </li>
          </ul>
        </div>

        <div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
          <h4 class="text-slate-800 mb-3 font-medium">🔧 watch vs 生命周期</h4>
          <ul class="space-y-1 pl-5">
            <li class="text-slate-600 text-sm leading-relaxed">watch：监听特定数据变化</li>
            <li class="text-slate-600 text-sm leading-relaxed">onUpdated：任何响应式数据变化</li>
            <li class="text-slate-600 text-sm leading-relaxed">优先使用watch监听具体数据</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 常见陷阱 -->
    <div>
      <h3 class="text-red-600 mb-5 font-semibold">⚠️ 常见陷阱</h3>
      <div class="space-y-5">
        <div class="pitfall-item error">
          <h4 class="text-red-600 font-medium mb-3">❌ 错误做法：</h4>
          <pre class="code-block"><code>onUpdated(() => {
  // ❌ 在onUpdated中修改响应式数据会造成无限循环
  count.value++
})</code></pre>
        </div>

        <div class="pitfall-item correct">
          <h4 class="text-green-600 font-medium mb-3">✅ 正确做法：</h4>
          <pre class="code-block"><code>watch(() => someData.value, (newVal) => {
  // ✅ 使用watch监听特定数据变化
  // 执行相应的操作
})</code></pre>
        </div>

        <div class="bg-orange-50 p-5 rounded-lg border border-orange-200">
          <h4 class="text-orange-700 font-medium mb-3">⚠️ 注意：</h4>
          <ul class="space-y-2 pl-5">
            <li class="text-orange-800 text-sm">onMounted不等于数据加载完成，只是DOM挂载完成</li>
            <li class="text-orange-800 text-sm">父组件onMounted时，所有子组件都已完成挂载</li>
            <li class="text-orange-800 text-sm">组件卸载时要清理所有副作用，避免内存泄漏</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这个组件纯展示，不需要逻辑
console.log('📖 [LifecycleGuide] 生命周期指南组件加载')
</script>

<style scoped lang="scss">
// 流程步骤样式
.flow-steps {
  @apply flex items-center flex-wrap gap-2 mb-2;
}

// 步骤标签样式（复杂渐变用sass）
.step {
  @apply px-4 py-2 rounded-2xl text-sm font-medium whitespace-nowrap;

  &.parent {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    @apply text-white;
  }

  &.child {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    @apply text-white;
  }

  &.grandchild {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    @apply text-gray-800;
  }
}

// 箭头样式
.arrow {
  @apply text-lg font-bold text-gray-500;
}

// 提示信息样式
.note {
  @apply text-sm text-green-600 italic mt-2 p-2 rounded-md;
  background: #ecfdf5;
  border-left: 3px solid #10b981;
}

// 错误示例样式
.pitfall-item.error {
  @apply p-5 rounded-lg;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

// 正确示例样式
.pitfall-item.correct {
  @apply p-5 rounded-lg;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

// 代码块样式
.code-block {
  @apply p-4 rounded-md overflow-x-auto text-sm leading-relaxed;
  background: #1f2937;
  color: #f9fafb;

  code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  }
}

// 响应式设计 - 移动端优化
@media (max-width: 768px) {
  .flow-steps {
    @apply flex-col items-stretch;

    .step {
      @apply text-center;
    }

    .arrow {
      @apply self-center;
      transform: rotate(90deg);
    }
  }
}
</style>
